<template >
  <div @click="handleClick">
    <Row>
          <Form  ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
            <Card  style="width:100%;height:430px;" >
                 <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    基本信息
                </p>
                <div style="width:68%;height:auto;margin:0 auto;">
                    <Col span="24">
                        <FormItem label="用车类型：" prop="modeId">
                            <RadioGroup v-model="formValidate.modeId">
                                <Radio label="1">公务</Radio>
                                <Radio label="2">执法</Radio>
                            </RadioGroup>
                        </FormItem>                          
                    </Col>
                   <Col span="12">
                      <FormItem label="用车单位：" prop="deptName">
                        <Input v-model="formValidate.deptName" placeholder="请输入用车单位" disabled></Input>
                     </FormItem> 
                      <FormItem label="联系人：" prop="ordersRider">
                        <Input v-model="formValidate.ordersRider" placeholder="请输入联系人"></Input>
                     </FormItem>                         
                    </Col>
                      <Col span="12">
                       <FormItem label="用车数量：" prop="number"  >
                            <Input v-model="formValidate.number" placeholder="请输入用车数量" disabled></Input>
                        </FormItem> 
                      <FormItem label="联系电话：" prop="ordersRiderMobile"  >
                            <Input v-model="formValidate.ordersRiderMobile" placeholder="请输入联系电话" ></Input>
                        </FormItem>
                     </Col>
                    <Col span="18">
                        <FormItem label="用车事由：" prop="ordersReason">
                            <Input v-model="formValidate.ordersReason" type="textarea" :maxlength=50  :autosize="{minRows: 2,maxRows: 5}" placeholder="请说明用车事由..."></Input>
                        </FormItem>
                    </Col> 
                     <Col span="18">
                        <FormItem label="上传附件：" prop="ordersAttachment">
                            <Upload 
                                 ref="upload"
                                :on-success="handleSuccess"
                                 :data = "data"
                                :before-upload="handleBeforeUpload"
                                :action="uploadUrl">
                                <Button icon="ios-cloud-upload-outline">上传附件</Button>
                            </Upload>
                        </FormItem>
                    </Col>   
                </div>
            </Card>
              <Card  style="width:100%;height:380px;margin-top:10px;" >
                 <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    订单信息
                </p>
                <div style="width:68%;height:auto;margin:0 auto;">    
                    <Col span="12"> 
                        <FormItem label="出发地点:" prop="ordersStartAddr" class="add_query">
                                <Input v-model="formValidate.ordersStartAddr" placeholder="请输入出发地点" 
                                  @on-change="handleChange(formValidate.ordersStartAddr,1)" ></Input>
                                <ul class="query_list" v-if="result1">
                                    <li  @click = "handleClick1(item)" v-for="item in maplist">{{item.name}}<a>{{item.district}}</a></li>
                                </ul>
                        </FormItem> 
                        <FormItem label="出发时间:" prop="ordersStartTime">
                           <DatePicker type="datetime" placeholder="请选择出发时间" v-model="formValidate.ordersStartTime" style="width:100%;"></DatePicker>
                         </FormItem>  
                        <FormItem label="乘车人数:" prop="ordersPassengerNumber">
                                <Input v-model="formValidate.ordersPassengerNumber" placeholder="请输入乘车人数"></Input>
                        </FormItem>                          
                    </Col>
                      <Col span="12">
                        <FormItem label="目的地点:" prop="ordersAimAddr" class="add_query">
                                <Input v-model="formValidate.ordersAimAddr" placeholder="请输入目的地点"  @on-change="handleChange(formValidate.ordersAimAddr,2)"></Input>
                                <ul class="query_list" v-if="result2">
                                    <li  @click = "handleClick2(item)" v-for="item in maplist">{{item.name}}<a>{{item.district}}</a></li>
                                </ul>
                        </FormItem> 
                      <FormItem label="用车天数:" prop="ordersEndTimeNum">
                                <Input v-model="formValidate.ordersEndTimeNum" placeholder="请输入用车天数"></Input>
                        </FormItem>                            
                    </Col>
                     <Col span="24">
                       <Col span="12">
                         <FormItem label="申请车型:" prop="vehModelId">
                        <Select v-model="formValidate.vehModelId" placeholder="请选择申请车型" style="width:200px;">
                            <Option v-for="item in vehList" :value="item.vehModelId" :key="item.vehModelId">{{ item.vehTypeName }}</Option>
                        </Select>
                    </FormItem>
                        </Col>
                     </Col>
                    <Col span="24">
                   <FormItem>
                            <Button type="primary" :loading="loading"  @click="handleSubmit('formValidate')">提交</Button>
                            <!-- <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
                         </FormItem>
                   </Col>
                </div>
             </Card>
              </Form>
        </Row>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import {getUserlist,getVehlist,subOrderData,mapQuerydata} from "@/api/data";
import { formatDate } from '../../components/date.js';
import { person,phonecode,modetype,reason} from '../../components/verification.js';
export default {
  name: 'apply_car',
  data () {
    return {
       data:{},
       uploadUrl:'',
      vehList:[],
      loading:false,
      maplist:[],
      result1:false,
      result2:false,
       uploadList: [],
       formValidate: {
        modeId:"",
        ordersAttachment:"",
        deptName:"",
        ordersStartTime:"",
        ordersRider: "",
        number: 1,
        ordersRiderMobile: "",
        ordersReason:"",
        ordersStartAddr:"",
        ordersPassengerNumber:'',
        ordersAimAddr:'',
        ordersEndTimeNum:'',
        vehModelId:'',
        'company.companyId':1,
        'sysUserBySysUserId.userId':Cookies.get('userId'),
        ordersStatus:1,
        ordersFlag:1
       },
        ruleValidate: {
        modeId: [
           {message: "请选择用车类型",required: true, trigger: 'change' }
        ],
        deptName: [
          { required: false, message: "请选输入用户单位", trigger: "blur" }
        ],  
        ordersRider: [
          { validator:person,trigger: "blur",required: true, }
        ],
        ordersRiderMobile: [
          { validator:phonecode, trigger: "blur",required: true, },
        ],
        ordersStartAddr: [
          { required: true, message: "请输入出发地点", trigger: "blur" }
        ],
        ordersAimAddr: [
          { required: true, message: "请输入目的地点", trigger: "blur" }
        ],
        ordersStartTime:[
          { required: true, type:'date',message: '请选择出发时间', trigger: 'change' }
        ],
        ordersEndTimeNum: [
          { required: true, message: "请输入用车天数", trigger: "blur" }
        ],
        ordersReason:[
          { validator:reason,trigger: "blur",required: false, }
        ],
        ordersPassengerNumber: [
          { required: true, message: "请输入乘车人数", trigger: "blur" }
        ],
        vehModelId:[
          {required: true, validator:modetype, trigger: "change"}
        ]
      }
    }
  },
   methods: {
     file(file){
    console.log(file);
     },
       handleChange(value,n){
       if(value === ""){
          this['result'+n] = false;
       }else{
          const data={
            keywords:value
           };
        mapQuerydata(data).then(res =>{
          if(res.count == 0){ 
            this.maplist = [];
             this['result'+n] = false;
            }else{
              this['result'+n] = true;
               this.maplist  = res.tips; 
            }
          })
       }      
     },
      handleClick(){
      this.result1 = false;
      this.result2 = false;
     },
     handleClick1(item){
         this.formValidate.ordersStartAddr = item.name;
         this.result1 = false;
     },
      handleClick2(item){
        this.formValidate.ordersAimAddr = item.name;
         this.result2 = false;
     },

    handleSubmit(name) {
     this.$refs[name].validate(valid => {
         if(valid){
             this.loading = true; 
           const data=this.formValidate;
            data.ordersStartTime = formatDate(new Date(this.formValidate.ordersStartTime), 'yyyy-MM-dd hh:mm:ss')
            data['mode.modeId'] = this.formValidate.modeId;
            data['vehModel.vehModelId'] = this.formValidate.vehModelId;
            subOrderData(data).then(res =>{
            if(res.flag == 1){
              this.$Message.success("提交成功");
              this.loading = false; 
               this.$router.push({
                 name: 'order_center'
               });
              this.$refs[name].resetFields();
            }else if(response.data.flag == 0){
            this.$Message.success("提交失败"); 
                }else if(response.data.flag == 2){
                this.$Message.success("状态过期");
                }
            }).catch(error => {
                this.$Message.error("请核对之后重新提交");
                this.loading = false; 
          });
           
         }else {
          this.$Message.error("请填写相关信息!");
        }
     }) 
    },
    handleBeforeUpload (file) {
       this.uploadUrl = "http://10.11.1.55/ygw/postPic?ids=Orders";
      this.data = {
        filename:file.name
      };
      if(this.uploadList.length < 1){
         let promise = new Promise((resolve) => {
        if(this.uploadList.length < 1)
                this.$nextTick(function () {
                          resolve(true);
                 });
        });
            return promise;
      }else{
         this.$Notice.warning({
             title: '一个订单只可上传一个附件'
         });
        return false;
        
      }
     
        
  },
  handleSuccess (res, file) {
         this.$Message.success("上传成功"); 
         this.formValidate.ordersAttachment = res.filePath;
  },
  handledata(file){
    console.log(file);
  }
  },

  mounted () {
           const data =  
             {userId:Cookies.get("userId")};
             getUserlist(data).then(res =>{
                this.formValidate.deptName = res[0].deptName +'--' + res[0].userRealname; 
            });
             getVehlist().then(res =>{
              this.vehList = res;
            });
             this.uploadList = this.$refs.upload.fileList;

 },
}
</script>

<style>
ul,li{
  margin:0;
  padding:0;
}
li{
  list-style:none;
}
.qq-group-img{
  display: block;
  margin: 0 auto;
  width: 240px;
}
.qq-group-intro{
  padding: 20px;
  font-size: 16px;
}
.add_query .ivu-form-item-content{
  position:relative;
}
.add_query .query_list{
  position:absolute;
  left:0;
  top:35px;
  margin:0;
  padding:0;
  background-color:#fff;
  border:solid 1px #ddd;
  z-index:999;
  width:100%;
  overflow:hidden;
}
.add_query .query_list li{
  line-height:26px;
  padding-left:5px;
  cursor:pointer;
}
.add_query .query_list li a{
  color:#999;
}

</style>
